<template>

    <a-modal :visible="open"
             @cancel="$emit('cancel')" @ok="$emit('ok')"
             :ok-button-props="{status:'danger'}">
        <template #title>
            删除警示
        </template>
        <div>你确定要删除 <span style="color: #f33;">{{showName}}</span> 吗?</div>
    </a-modal>
</template>

<script>
    export default {
        name: "",
        props: {
            open: {
                type: Boolean,
                required: true,
                default: false
            },
            name: {
                type: String,
                required: true,
                default: ''
            },
            rowKeys: {
                type: Array,
                required: false,
                default: []
            },
            tableData: {
                type: Array,
                required: false,
                default: []
            }
        },
        emits: ['ok', 'cancel'],
        data() {
            return {
                visible: this.open,
                showName: this.name
            }
        },
        watch: {
            'name'() {
                if (this.name !== '' && this.name.length !== 0) {
                    this.showName = this.name
                }
            },
            'rowKeys'() {
                if (this.rowKeys.length > 0) {
                    this.updateName()
                }
            },
            'tableData'() {
                this.updateName()
            }
        },
        methods: {
            updateName() {
                let name = []
                for (let row of this.tableData) {
                    for (let key of this.rowKeys) {
                        if (row.key === key) {
                            name.push(row.name)
                            break
                        }
                    }
                }
                this.showName = name
            }
        }
    }
</script>

<style scoped>

</style>
